<template>
  <div class='blog'>
    <div>
      <template v-if="ifskeleton">
        <el-skeleton class="asd" animated />
        <!-- <el-skeleton class="asd" animated />
        <el-skeleton class="asd" animated /> -->
      </template>
    </div>
    <div class="blog-all" v-for="item in blogList" :key="item['id']" >
      <div class="blog-all-top">
        <div class="blog-b1">
          <h4 class="h4" @click="routerPath(item.id, item.userId)">{{ item['title'] }}</h4>
        </div>
        <div class="blog-b2" @click="routerPath(item.id, item.userId)">
          {{ run(item.content) }}
        </div>
      </div>

      <div class="blog-all-bottom">
        <ul class="blog-d3-ul">
          <li class="yuanchang">原创</li>
          <li class="zhuanzai" v-if="false">转载</li>
          <li>
            <i class="iconfont icon-browse"></i>
            <span class="span">{{ item.views }}</span>
          </li>
          <li>
            <i class="iconfont icon-comment"></i>
            <span class="span"> {{item.commentCount}} </span>
          </li>
          <li>
            <i class="iconfont icon-fabulous"></i>
            <span class="span"> {{ item.collectCount}} </span>
          </li>
        </ul>
        <div>
          <el-button @click="deletea(item.id)" v-if="ifbenren">删除</el-button>
          <el-button @click="xiurouterpath(item.id)" v-if="ifbenren">编辑文章</el-button>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { deleteArticesAPI } from '../../api/artice'
import { getMyBlogAPI } from '../../api/userAPI'
import { error1, info1, succ1 } from '../../tool/ElMessageAny'
import {abstractFn} from '../../tool/outmrkcode'
import {
  IblogList
} from './exType'
import { ElMessageBox } from 'element-plus'
import UseLocalStorage from '../../tool/UseLocalStorage'

export default defineComponent({
  name: '',
  props: {
    userID: {
    }
  },
  setup (props: any) {
    const zifucontent = ref<string>('content')
    const contents = ref<string>('')
    // 获取用户id
    const userid = props.userID
    // 空骨架的关闭,和监听
    const ifskeleton = ref<Boolean>(true)
    // 请求数据
    const blogList = ref<IblogList[]>([])
    const getBlog = async () => {

      const res = await getMyBlogAPI(userid)
      blogList.value = res.data.data.reverse()
      ifskeleton.value = false
      contents.value = abstractFn(res.data.data.content)
      console.log(res);
      
      if(blogList.value.length === 0) {
        info1('无文章，赶紧写一篇吧')
      }
    }
    const router = useRouter()

    const routerPath = (id: any,userid: any) => {
      router.push({
        name: 'aritces',
        query: {
          aritcesId: id,
          userID: userid
        }
      })
    }
    const run = abstractFn
    // 删除
    const deletea = (id: any) => {
      ElMessageBox.confirm('是否删除',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        deleteArticesAPI({id}).then(res => {
          if(res.data.code === 200) {
            succ1('删除成功')
            getBlog()
          }
        })
      }).catch(() => {
        error1('删除失败')
      })
    }
    // 修改文章
    const xiurouterpath = (id: any) => {
      router.push({
        name: 'write',
        params: {
          id
        }
      })
    }
    // 判断是否本人看文章
    const route = useRoute()
    // 本地存储
    const { localStorageId } = UseLocalStorage()
    const ifbenren = ref<boolean>(route.query.userID == localStorageId)
    
    onMounted(() => {
      getBlog()
    })
    return {
      ifskeleton,
      blogList,
      routerPath,
      contents,
      run,
      zifucontent,
      deletea,
      xiurouterpath,
      ifbenren
    }
  }
})
</script>

<style lang='scss' scoped>
.asd{
  background-color: #fff;
  padding: 16px;
  margin: 16px 0;
}
.blog-all{
  width: 100%;
  height: 157px;
  background-color: #fff;
  margin: 16px 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.blog-b1{
  .h4{
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #222226;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .h4:hover{
    color: skyblue;
  }
}

.blog-b2{
  height: 48px;
  color: #555666;
  margin-top: 8px;
  line-height: 24px;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.blog-all-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .blog-d3-ul{
    height: 30px;
    display: flex;
    align-items: center;
    li{
      margin-right: 58px;
      .span{
        margin-left: 3px;
        color: #555666;
      }
    }
    .yuanchang{
      font-size: 14px;
      background-color: #fcebea;
      color: #ff7f79;
      padding: 2px 5px;
      border-radius: 3px;
      margin-right: 20px !important;
    }
    .zhuanzai{
      font-size: 14px;
      background-color: #e8ffd9;
      color: #9bf14b;
      padding: 2px 5px;
      border-radius: 3px;
      margin-right: 20px !important;
    }
  }
}
</style>
